import styled from 'styled-components'

export const AreaHeaderWrapper = styled.div`
    display: flex;
    border-bottom: 2px solid #c10d0c;
    position: relative;

    .left {
        display: flex;

        .icon-left {
            width: 35px;
            height: 35px;
            background-image: url('/images/icons.png');
            background-position: -225px -156px;
        }

        h3 {
            font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
            font-size: 20px;
            line-height: 28px;
            cursor: pointer;
            margin-right: 20px;
        }

        .keywords {
            display: flex;
            margin-top: 8px;

            .item {
                cursor: default;

                .text {
                    font-size: 12px;
                    color: #74726b;

                    &:hover {
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }

                .divider {
                    font-size: 12px;
                    margin: 0 15px;
                    color: #cccccc;
                }

                &:last-child {
                    .divider {
                        display: none;
                    }
                }
            }
        }
    }

    .right {
        display: flex;
        position: absolute;
        right: 0;
        bottom: 7px;

        .icon-right {
            width: 15px;
            height: 15px;
            background-image: url('/images/icons.png');
            background-position: 0px -238px;
        }

        .more {
            font-size: 12px;
            color: #74726b;
            cursor: pointer;
            margin-right: 5px;

            &:hover {
                text-decoration: underline;
            }
        }
    }
`
